<template>
  <div>
    <div class="btns">
      <el-button @click="reflashData">更新数据</el-button>
    </div>
    <div ref="showAgTable" v-size-ob="whenRisizeChange">
      <ag-grid-vue
        :style="`width: 100%; height: ${boxHeight}px;`"
        class="ag-theme-quartz"
        :defaultColDef="defaultColDef"
        :columnTypes="columnTypes"
        :columnDefs="columnDefs"
        :headerHeight="headerHeight"
        :rowHeight="rowHeight"
        rowSelection="single"
        :suppressRowHoverHighlight="false"
        :columnHoverHighlight="false"
        :enableCellTextSelection="true"
        :ensureDomOrder="true"
        :rowStyle="rowStyle"
        :getRowStyle="getRowStyle"
        :rowClass="rowClass"
        :getRowClass="getRowClass"
        :rowClassRules="rowClassRules"
        :getRowId="(params) => params.data.mySelfId"
        @grid-ready="onGridReady"
        :enableBrowserTooltips="false"
        :tooltipMouseTrack="true"
        :tooltipShowDelay="1000"
        :rowMultiSelectWithClick="true"
        :isRowSelectable="isRowSelectable"
        :suppressRowClickSelection="false"
        :suppressMenuHide="true"
        :alwaysMultiSort="false"
        :animateRows="false"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>
<script>
/*
  //css样式
  rowStyle
  getRowStyle
  rowClass
  getRowClass
  rowClassRules
  //其他
  suppressRowHoverHighlight:滑入行高亮
  columnHoverHighlight：滑入列高亮
  //语言
  localeText
  getLocaleText
  //唯一id
  getRowId
  //恢复浏览器的选取功能
  enableCellTextSelection
  ensureDomOrder
  //自定义遮罩展示组件 自定义无数据时展示组件
  loadingOverlayComponent='组件名'
  .noRowsOverlayComponent='组件名'
  //滑入提示需要开启
  //滑入提示延迟
  tooltipShowDelay='1000'
  tooltipMouseTrack="true"
  enableBrowserTooltips:滑入提示
  //多选框
  rowSelection="multiple"
  //支持多选
  rowMultiSelectWithClick='true'
  //是否可以选择
  isRowSelectable
  //点击行是否可以选择 false可以选择
  suppressRowClickSelection='false'
  //单击可编辑
  :singleClickEdit='true
  //默认显示表头筛选
  suppressMenuHide='true'
  alwaysMultiSort='true'
  //动画关闭
  animateRows=false
  //可以按多列排序
  multiSortKey='ctrl'
  //是否多排
  alwaysMultiSort='false'
  

*/
import { AgGridVue } from "ag-grid-vue";
import { nanoid } from "nanoid";
import CustomTooltip from "./components/CustomTooltip.vue";

export default {
  data() {
    return {
      boxHeight: 300,
      tableData: [],
    };
  },
  components: {
    AgGridVue,
    CustomTooltip,
  },
  created() {
    this.headerHeight = 32;
    this.rowHeight = 32;
    this.rowStyle = {}; // background: "black"
    this.getRowStyle = (params) => {
      // if (params.node.rowIndex % 2 === 0) {
      //   return { background: "red" };
      // }
    };
    this.rowClass = "my-green-class";
    this.getRowClass = (params) => {
      // if (params.node.rowIndex % 2 === 0) {
      //   return "my-shaded-effect";
      // }
    };
    this.isRowSelectable = (params) => {
      return params.data.price != 2;
    };
    this.rowClassRules = {
      // "rag-green-outer": function(params) {
      //   return params.data.year === 2008;
      // },
    };
    //默认配置
    this.defaultColDef = {
      suppressMovable: true, //可以移动列
      unSortIcon: true, //排序符号是否展示
      editable: false, //单元表格是否可编辑
      // enableRowGroup: true,
      // enablePivot: true,
      // enableValue: true,
      //开启排序
      sortable: true,
      //是否可以调整列大小，就是拖动改变列大小
      resizable: true,
      //开启刷选
      filter: true,
      // suppressRowDeselection:true,
      // suppressRowClickSelection:true
      // checkboxSelection :true,
      //表头文字换行
      // wrapHeaderText:false,
      //表头高度自适应
      // autoHeaderHeight:false,
      flex: 1,
      // tooltipValueGetter: ({ value }) => {
      //   return value;
      // },
      // valueGetter:(params)=>{
      //     return params.data
      // },
      valueFormatter: ({ value, node }) => {
        // if(node.isRowPinned()){
        //   return '汇总'
        // }
        return value;
      },
      cellClass: (params) => {
        // return 'blue-color'
      },
      tooltipComponent: "CustomTooltip",
    };
    //定义列类型
    this.columnTypes = {};
    this.columnDefs = [
      {
        headerName: "",
        field: "checkboxSelection",
        pinned: "left",
        checkboxSelection: true,
        // headerCheckboxSelection: true,
        sortable: false,
        filter: false,
        width: 50,
      },
      {
        field: "make",
        wrapText: true, //可换行
        autoHeight: true,
        headerName: "姓名",
        headerTooltip: "姓名",
        tooltipComponentParams: { type: "success" },
        tooltipField: "make",
      },
      { field: "model", headerName: "性别" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
      { field: "price", headerName: "价格" },
    ];
    this.tableData = [
      { make: "Toyota", model: "Celica", price: 35000, mySelfId: 1 },
      { make: "Ford", model: "Mondeo", price: 32000, mySelfId: 2 },
      { make: "Porsche", model: "Boxster", price: 72000, mySelfId: 3 },
    ];
    for (let i = 0; i < 100; i++) {
      this.tableData.push({
        make: `x${i}x`,
        model: `${i}Mondeo`,
        price: Math.random() * 10,
        mySelfId: nanoid(),
      });
    }
  },
  methods: {
    clearHeader() {
      this.gridApi.setFilterModel(null);
      this.gridApi.deselectAll();
    },
    clearSort() {
      this.gridColumnApi.applyColumnState({
        defaultState: { sort: null },
      });

      // this.gridApi.applyColumnState({
      //   state: [
      //     { colId: 'country', sort: 'asc', sortIndex: 1 },
      //     { colId: 'sport', sort: 'asc', sortIndex: 0 },
      //   ],
      //   defaultState: { sort: null },
      // });

      // this.gridApi.applyColumnState({
      //   state: [{ colId: 'athlete', sort: 'desc' }],
      //   defaultState: { sort: null },
      // });
    },
    reflashData() {},
    randomInt() {
      return Math.floor(Math.random() * 10);
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      this.getData();
      this.gridApi.setPinnedBottomRowData(this.getSummationData());
    },
    getData() {
      this.gridApi.showLoadingOverlay();
      this.gridApi.hideOverlay();
      this.gridApi.setRowData(this.tableData);
    },
    whenRisizeChange() {
      this.$nextTick(() => {
        // this.gridApi.sizeColumnsToFit();
        this.boxHeight =
          document.documentElement.clientHeight -
          this.$refs.showAgTable.getBoundingClientRect().top -
          15;
      });
    },
    getSummationData(list) {
      const res = {};
      const arr = list ? list : this.tableData;
      res["make"] = "汇总";
      res["model"] = arr.length;
      return [res];
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .blue-color {
  color: blue;
}
</style>
